<template>
  <div class="main">
    <div class="img">
      <img
        :src="oss + url"
        alt
        style=" width: 600px;
  height: 400px;"
        @click="imgShow = false"
        srcset
        v-show="imgShow"
      />
    </div>

    <div class="left">
      <div>
        <p>工程概况</p>
        <div class="scoll1">
          <div style="padding:0px 20px">
            中铁四局集团合新铁路HXZQ-7标3#拌合站位于DK321+000线路左侧6公里处，地势较平坦，处于安徽省合肥市新站区包公大道与大众路交叉口东北侧，交通便利。拌和站占地约25亩，将场区划分为生产区、办公区和生活区。混凝土搅拌站配置2台180型拌合机，150t粉料罐14个，350t粉料罐4个；20辆混凝土运输车；储料仓共计10个，其中11.7m
            x
            30m料仓10个，料仓高度为3m，原材料最大储存量为8775m³，约1.78万吨。设置外加剂仓库1间，设配电室、发电机房各1间、过磅室1处，污水处理池1处。拌和站地面采用混凝土硬化处理，砂石料仓、配料机上方采用钢结构大棚进行四面围挡办公及生活用房采用彩钢房搭建。
            本拌和站计划供应类型及等级分别为C30泵送、C30水下泵送、C
            35泵送、C35水下泵送、C40泵送、C40水下泵送、C50,C55泵送混凝土，供应混凝土总方量约34.4万方，其中下部结构设计混凝社数量共计30.2万方,连续梁设计混凝土数量共计4.2万方。
          </div>
        </div>
        <!-- <div id="container2"></div> -->
      </div>
      <div>
        <p>环保</p>
        <div style="display: flex">
          <div style="width: 300px">
            <div id="container3" v-show="false"></div>
            <div id="schart2"></div>
          </div>
          <div class="huanBaoR">
            <div>
              <p style="font-size: 16px; line-height: 20px; text-align: left">PM2.5</p>
              <p
                style="
                  font-size: 12px;
                  color: #ffffff;
                  width: 60px;
                  text-align: left;
                  line-height: 20px;
                "
              >
                {{
                  tianqi.pm25
                }}
                <span
                  class="float_right"
                >{{ tianqi.pm25_desc }}</span>
              </p>
              <el-progress
                :text-inside="true"
                :show-text="false"
                :stroke-width="10"
                :percentage="tianqi.pm25"
              ></el-progress>
            </div>
            <div>
              <p style="font-size: 16px; line-height: 20px; text-align: left">PM10</p>
              <p
                style="
                  font-size: 12px;
                  color: #ffffff;
                  width: 60px;
                  text-align: left;
                  line-height: 20px;
                "
              >
                {{
                  tianqi.pm10
                }}
                <span
                  class="float_right"
                >{{ tianqi.pm10_desc }}</span>
              </p>
              <el-progress
                :text-inside="true"
                :show-text="false"
                :stroke-width="10"
                :percentage="tianqi.pm10"
              ></el-progress>
            </div>
            <div>
              <p style="font-size: 16px; line-height: 20px; text-align: left">O3</p>
              <p
                style="
                  font-size: 12px;
                  color: #ffffff;
                  width: 60px;
                  text-align: left;
                  line-height: 20px;
                "
              >
                {{
                  tianqi.o3
                }}
                <span
                  class="float_right"
                >{{ tianqi.o3_desc }}</span>
              </p>
              <el-progress
                :text-inside="true"
                :show-text="false"
                :stroke-width="10"
                :percentage="tianqi.o3"
              ></el-progress>
            </div>
            <div>
              <p style="font-size: 16px; line-height: 20px; text-align: left">NO2</p>
              <p
                style="
                  font-size: 12px;
                  color: #ffffff;
                  width: 60px;
                  text-align: left;
                  line-height: 20px;
                "
              >
                {{
                  tianqi.no2
                }}
                <span
                  class="float_right"
                >{{ tianqi.no2_desc }}</span>
              </p>
              <el-progress
                :text-inside="true"
                :show-text="false"
                :stroke-width="width"
                :percentage="tianqi.no2"
              ></el-progress>
            </div>
            <div style="float: left">
              <p style="font-size: 16px; line-height: 20px; text-align: left">SO2</p>
              <p
                style="
                  font-size: 12px;
                  color: #ffffff;
                  width: 60px;
                  text-align: left;
                  line-height: 20px;
                "
              >
                {{
                  tianqi.so2
                }}
                <span
                  class="float_right"
                >{{ tianqi.so2_desc }}</span>
              </p>
              <el-progress
                :text-inside="true"
                :show-text="false"
                :stroke-width="width"
                :percentage="tianqi.so2"
              ></el-progress>
            </div>
          </div>
        </div>
        <!-- <p>原材料消耗动态</p>
        <div id="container1"></div>-->
      </div>

      <div>
        <p>照片墙</p>
        <el-carousel :interval="4000" style="width:95%;margin:0 auto" type="card" height="200px">
          <el-carousel-item v-for="item in photos" :key="item">
            <!-- <h3 class="medium">{{ item }}</h3> -->
            <img :src="oss + item.imgUrl" alt style="width:235px;height:200px" srcset />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="center">
      <div class="shipin">
        <video
          src="https://jjjt.oss-cn-shanghai.aliyuncs.com/ZHBHZ/ztsjxcp.mp4"
          type="video/mp4"
          controls="controls"
          autoplay="autoplay"
        ></video>
      </div>
      <div>
        <p>项目里程碑</p>
        <hr class="hrr" />
        <div style="padding:0 25px">
          <div class="scoll">
            <div style="text-align: left;" :style="{ width: 120 * liCheng.length + 'px' }">
              <div
                v-for="(item, index) in liCheng"
                :key="index"
                style="display:inline-block;position: relative;"
              >
                <div class="bco" :style="{ left: 130 * index + 'px' }" v-show="index % 2 == 0">
                  <div class="yellow"></div>
                  <p class="nowra">{{ item.projectName }}</p>
                  <img
                    @click="showCi(item.imgUrl)"
                    :src="oss + item.imgUrl"
                    width="100"
                    height="60"
                  />
                </div>

                <div class="bco1" :style="{ left: 130 * index + 'px' }" v-show="index % 2 != 0">
                  <img
                    @click="showCi(item.imgUrl)"
                    :src="oss + item.imgUrl"
                    width="100"
                    height="60"
                  />
                  <p class="nowra">{{ item.projectName }}</p>
                  <div class="yellow"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="right">
      <div class="right_top">
        <div style="padding: 35px 20px 15px">
          <div style="display: inline-block; margin-left: 25px">
            <img src="../../assets/img/title/监控.webp" alt />
            <p>
              监控
              <span class="con">{{ jkCount }}</span> 台
            </p>
          </div>
          <div style="display: inline-block; float: right">
            <el-progress
              type="circle"
              :format="format"
              color="#33e6ff"
              :percentage="100"
              :width="82"
              stroke-width="10"
              style="margin-right: 37px"
            ></el-progress>
            <el-progress
              type="circle"
              :format="format3"
              color="#ff4b00"
              :percentage="100"
              :width="82"
              :stroke-width="10"
              style="margin-right: 37px"
            ></el-progress>
          </div>
        </div>
        <div style="padding: 15px 20px">
          <div style="margin-left: 25px">
            <img src="../../assets/img/title/扬尘检测仪.webp" alt />
            <p>
              扬尘监测设备
              <span class="con">1</span> 台
            </p>
          </div>
        </div>
        <div style="padding: 15px 20px">
          <div style="display: inline-block; margin-left: 25px">
            <img src="../../assets/img/title/车-泵罐车.webp" alt />
            <p>
              罐车数量
              <span class="con">{{ o_o }}</span> 辆
            </p>
            <p>
              总运输
              <span class="con">{{ zong }}</span> m³
            </p>
          </div>
          <div style="display: inline-block; float: right">
            <el-progress
              type="circle"
              :format="format1"
              color="#33e6ff"
              :percentage="100"
              :width="82"
              :stroke-width="10"
              style="margin-right: 37px"
            ></el-progress>
            <el-progress
              type="circle"
              :format="format3"
              color="#ff4b00"
              :percentage="100"
              :width="82"
              stroke-width="10"
              style="margin-right: 37px"
            ></el-progress>
          </div>
        </div>
      </div>
      <div class="right_bottom">
        <p>智慧管理系统</p>
        <div class="a_f">
          <div class="a">
            <a href="http://www.crec4.com/" target="_blank">
              <img src="../../assets/img/new/11.png" alt style="width:178px;height:178px" srcset />
            </a>
          </div>
          <div class="a">
            <a href="http://www.ctce4.com.cn/" target="_blank">
              <img src="../../assets/img/new/22.png" alt style="width:178px;height:178px" srcset />
            </a>
          </div>
          <div class="a">
            <a href="https://portal.r93535.com/" target="_blank">
              <img src="../../assets/img/new/33.png" alt style="width:178px;height:178px" srcset />
            </a>
          </div>

          <div class="a">
            <a href="http://39.106.128.107/index" target="_blank">
              <img src="../../assets/img/new/44.png" alt style="width:178px;height:178px" srcset />
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Chart, registerShape } from "@antv/g2";
import echarts from "echarts";
export default {
  name: "SJZL",
  data() {
    return {
      oss: "http://jjjt.oss-cn-shanghai.aliyuncs.com/",
      jkCount: "",
      o_o: "",
      tianqi: "",
      zong: "",
      hunRemData: "",
      photos: "",
      liCheng: "",
      url: "",
      imgShow: false,
      width: 10
    };
  },
  created() { },
  mounted() {
    if (localStorage.getItem("user_id") == null) {
      this.$router.push({
        path: "/login",
      });
    }

    this.$axios
      .get(
        "https://v0.yiketianqi.com/api?version=v10&appid=29886216&appsecret=9zzGvRmJ&cityid=101220101"
      )
      .then((res) => {
        this.tianqi = res.data;
        this.analysis[5].number = res.data.so2 + "ug/m³";
        this.analysis[11].number = res.data.o3 + "ug/m³";
      })
      .catch(() => { });
    this.$api
      .MonitoringCountMonitoring({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {
        this.jkCount = res.data;
      });

    this.$api
      .MilestoneselectMilestone({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {
        for (const key in res.data) {
          if (res.data[key].projectName.length > 8) {
            res.data[key].projectName =
              res.data[key].projectName.substring(0, 8) + "...";
          }
        }

        this.liCheng = res.data;
      });

    this.$api
      .CarTaskFindCarTaskByZYSL({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {
        this.zong = res.data;
      });

    this.$api
      .CarsCountCars({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {
        this.o_o = res.data;
      });
    this.$api
      .PhotoWallFindPhotoWall({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {
        this.photos = res.data;
      });

    this.$api
      .DispatcherTaskFindDispatcherTaskByHNTJZ({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {
        this.hunRemData = res.data;
      });

    this.$api
      .findInformation({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {
        localStorage.setItem("videoToken", res.data);
      });
    // this.chart1();
    // this.chart2();

    // this.chart4();
    this.schart1();
  },
  methods: {
    showCi(url) {
      this.url = url;
      this.imgShow = true;
    },
    schart1() {
      this.$axios
        .get(
          "https://www.tianqiapi.com/api?version=v1&appid=53622763&appsecret=NFgVUwV2&cityid=101220101"
        )
        .then((res) => {
          var data5 = res.data.data[0].air;
          var data6 = res.data.data[0].air_level;
          this.tq9 = res.data.data[0].air;
          this.tq3 = res.data.data[0].air_level;
          let myChart1 = echarts.init(document.getElementById("schart2"));
          let option1 = {
            title: {
              //   top: 20,
              left: "center",
              //   text: "空气质量指数",
              textStyle: {
                //  padding: 5,				// 提示框浮层的文本样式。...
                color: "#BDEDF4",
              },
            },
            // backgroundColor: "#000",
            tooltip: {
              // 本系列特定的 tooltip 设定。
              show: true,
              formatter: "{b}：{c}%",
              backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
              borderColor: "#fff", // 提示框浮层的边框颜色。...
              borderWidth: 10, // 提示框浮层的边框宽。...
              padding: 25, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
              textStyle: {
                // 提示框浮层的文本样式。...
                // color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
              },
            },

            series: [
              {
                name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
                type: "gauge", // 系列类型
                radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
                center: ["50%", "60%"], // 仪表盘位置(圆心坐标)
                startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                endAngle: -45, // 仪表盘结束角度,默认 -45
                clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
                min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
                max: 400, // 最大的数据值,默认 100 。映射到 maxAngle。
                splitNumber: 10, // 仪表盘刻度的分割段数,默认 10。

                axisLine: {
                  // 仪表盘轴线(轮廓线)相关配置。
                  show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
                  lineStyle: {
                    // 仪表盘轴线样式。
                    color: [
                      [0.125, "#3EFF25"],
                      [0.25, "#E1FF22"],
                      [0.375, "#FFD228"],
                      [0.5, "#FFA337"],
                      [0.75, "#FF4B00"],
                      [1, "red"],
                    ], //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    width: 30, //轴线宽度,默认 30。
                    // shadowBlur: 20,				//(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    // shadowColor: "#ccc",		//阴影颜色。支持的格式同color。
                  },
                },

                splitLine: {
                  // 分隔线样式。
                  show: false, // 是否显示分隔线,默认 true。
                  length: 30, // 分隔线线长。支持相对半径的百分比,默认 30。
                  lineStyle: {
                    // 分隔线样式。
                    color: "#aaa", //线的颜色,默认 #eee。
                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    width: 2, //线度,默认 2。
                    type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
                    shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    shadowColor: "#ccc", //阴影颜色。支持的格式同color。
                  },
                },

                axisTick: {
                  // 刻度(线)样式。
                  show: true, // 是否显示刻度(线),默认 true。
                  splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
                  length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
                  lineStyle: {
                    // 刻度线样式。
                    color: "#eee", //线的颜色,默认 #eee。
                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    width: 1, //线度,默认 1。
                    type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
                    // // shadowBlur: 10,				//(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    // shadowColor: "#fff",		//阴影颜色。支持的格式同color。
                  },
                },

                axisLabel: {
                  // 刻度标签。
                  show: true, // 是否显示标签,默认 true。
                  distance: 5, // 标签与刻度线的距离,默认 5。
                  color: "#fff", // 文字的颜色,默认 #fff。
                  fontSize: 15, // 文字的字体大小,默认 5。
                  formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
                },

                pointer: {
                  // 仪表盘指针。
                  show: true, // 是否显示指针,默认 true。
                  length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                  width: 5, // 指针宽度,默认 8。
                },

                itemStyle: {
                  // 仪表盘指针样式。
                  color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
                  opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                  borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
                  borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                  borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
                  // shadowBlur: 10,			// (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                  // shadowColor: "#fff",	// 阴影颜色。支持的格式同color。
                },

                title: {
                  // 仪表盘标题。
                  show: true, // 是否显示标题,默认 true。
                  offsetCenter: [0, "20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                  color: "#3EFF25", // 文字的颜色,默认 #333。
                  fontSize: 20,
                  fontWeight: 600, // 文字的字体大小,默认 15。
                },

                detail: {
                  // 仪表盘详情，用于显示数据。
                  show: true, // 是否显示详情,默认 true。
                  offsetCenter: [0, "50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                  color: "auto", // 文字的颜色,默认 auto。
                  fontSize: 40, // 文字的字体大小,默认 15。
                  formatter: "{value}", // 格式化函数或者字符串
                },

                data: [
                  {
                    name: data6,
                    value: data5,
                  },
                ],
              },
            ],
          };

          myChart1.setOption(option1);
          window.addEventListener("resize", () => {
            myChart1.resize();
          });
        });
    },
    // 指定进度条文字
    format(percentage) {
      if (percentage == 0) {
        return "故障\n0";
      }
      return percentage === 100 ? "正常\n" + this.jkCount : `${percentage}%`;
    },

    format3(percentage) {
      if (percentage == 100) {
        return "故障\n0";
      }
    },

    format1(percentage) {
      if (percentage == 0) {
        return "故障\n0";
      }
      return percentage === 100 ? "正常\n" + this.o_o : `${percentage}%`;
    },

    chart2() {
      let data = [];

      this.$api
        .DispatcherTaskFindDispatcherTaskByHNTSC({
          user_id: localStorage.getItem("user_id"),
        })
        .then((res) => {
          data = res.data;
          let num = 0;
          for (const key in res.data) {
            num += parseInt(res.data[key].count);
          }
          for (const key in res.data) {
            res.data[key].percent =
              (parseInt(res.data[key].count) / num).toFixed(1) - 0.1;
          }
          const chart = new Chart({
            container: "container2",
            autoFit: true,
            width: 400,
            height: 200,
          });
          chart.coordinate("theta", {
            radius: 0.75,
          });

          chart.data(data);

          chart.scale("percent", {
            formatter: (val) => {
              val = val * 100 + "%";
              return val;
            },
          });

          chart.tooltip({
            showTitle: false,
            showMarkers: false,
          });

          chart
            .interval()
            .position("percent")
            .color("beton")
            .label("percent", {
              content: (data) => {
                return `${data.beton}: ${data.percent * 100}%`;
              },
            })
            .adjust("stack");

          chart.interaction("element-active");

          chart.render();
        });
    },

    chart4() {
      let data = [];
      this.$api
        .DispatcherTaskFindDispatcherTaskBySCYDBB({
          user_id: localStorage.getItem("user_id"),
        })
        .then((res) => {
          data = res.data;
          const chart = new Chart({
            container: "container4",
            width: 700,
            height: 280,
          });
          chart.data(data);
          chart.scale("count", {
            nice: true,
            alias: "数量",
          });

          chart.tooltip({
            showMarkers: false,
          });
          chart.interaction("active-region");

          chart.interval().position("beton*count");

          chart.render();

          chart.data(data);
        });
    },
  },
};
</script>
<style scoped>
.main {
  /* background: url("http://jjjt.oss-cn-shanghai.aliyuncs.com/ZHBHZ/bgg.png"); */
  background-size: 100% 100%;
  display: flex;
  height: 906px;
  padding: 24px;
}

.left > div,
.right > div {
  /* margin: 25px 30px; */
}

.left > div {
  width: 500px;
  margin: 0px 16px 16px 0px;
  height: 276px;
  background: url("../../assets/img/title/new1.png") no-repeat;
  background-size: 500px 276px;
}

.left,
.center,
.right > div > p {
  text-align: center;
  font-size: 18px;
  color: #00f6ff;
  line-height: 40px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.main >>> .el-carousel__indicators--outside {
  display: none;
}

.text_color {
  color: #ffffff;
  font-size: 12px;
}

.center > div:nth-of-type(2) {
  margin-top: 16px;
  background: url("../../assets/img/title/bagdd.png");
  width: 840px;
  height: 334px;
  background-size: 840px 334px;
}

.right > div:nth-of-type(1) {
  background: url("../../assets/img/title/zu8.webp");
  background-size: 100% 100%;
  width: 500px;
  margin: 0px 0px 16px 16px;
  height: 358px;
}

.right > div:nth-of-type(2) {
  background: url("../../assets/img/title/zu7.webp");
  background-size: 100% 100%;
  width: 500px;
  margin: 0px 0px 16px 16px;
  height: 486px;
}

.right p {
  color: #00f5fe;
  line-height: 30px;
}

.right p > .con {
  color: #ff4b00;
}

.right_top {
  position: relative;
}

table {
  font-size: 14px;
  color: #ffffff;
  width: 100%;
  text-align: center;
}

table td {
  border-bottom: 2px solid #1c5ed4;
}

table tr:nth-child(odd) {
  height: 80px;
  background: #06112d;
  opacity: 0.8;
}

table tr:nth-child(even) {
  height: 80px;
  background: #0b334c;
  opacity: 0.8;
}

.huanBaoR {
  width: 200px;
}
.huanBaoR > div {
  width: 60px;
  display: inline-block;
  margin-right: 40px;
}

#schart2 {
  float: left;
  width: 380px;
  height: 300px;
  position: relative;
  top: -60px;
  left: -40px;
}

.shipin {
  width: 840px;
  height: 510px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../../assets/img/title/video.png);
}

video {
  width: 800px;
  height: 450px;
}

.scoll {
  width: 750px;
  height: 280px;
  overflow-x: scroll;
  overflow-y: hidden;
}

.scoll1 {
  width: 500px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
  color: #ffffff;
}

.bco {
  position: absolute;
  top: 93px;
  width: 120px;
  /* left: -120px; */
  display: inline-block;
}

.bco1 {
  width: 120px;
  top: -19px;
  position: absolute;
  display: inline-block;
  /* left: -120px; */
}
.hrr {
  width: 90%;
  margin: 0 auto;
  height: 2px;
  background: #01f2ff;
  border-radius: 1px;
  border: none;
  top: 120px;
  position: relative;
}
.yellow {
  width: 10px;
  height: 10px;
  background: #fbf964;
  border-radius: 50%;
  text-align: center;
  margin: -5px auto 0px auto;
}

.leftA {
  margin: 12px 8px;
  width: 120px;
  height: 100px;
  background: rgba(6, 17, 45, 0.5);
  border: 1px solid;
  border-image: linear-gradient(-90deg, #299bff, #1753ff) 10 10;
  box-shadow: 0px 0px 40px 0px rgba(0, 105, 248, 0.3);
}

.leftA a > p {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #08aafe;
  text-align: center;
}

.leftB {
  margin: 12px 8px;
  width: 40px;
  height: 100px;
  background: #06112d;
  border: 1px solid;
  border-image: linear-gradient(-90deg, #299bff, #1753ff) 10 10;
  box-shadow: 0px 0px 40px 0px rgba(0, 105, 248, 0.3);
}

a {
  text-decoration: none;
}

.leftB > p {
  width: 20px;
  height: 55px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  margin: 5px auto;
  color: #08aafe;
}
.nowra {
  white-space: nowrap;
  font-size: 14px;
}

.img {
  width: 600px;
  height: 400px;
  position: absolute;
  left: 660px;
  top: 300px;
  z-index: 999;
}
.a {
  width: 178px;
  height: 178px;
  display: inline-block;
  margin: 8px;
}
.a_f {
  margin: 30px auto;
  width: 388px;
}
</style>
